<template>
<div>
  <!--面包屑导航区域-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/waiter' }" style="font-size:18px">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/choose'}" style="font-size:18px">提交订单</el-breadcrumb-item>
      </el-breadcrumb>


     <el-card style="font-size:24px  ;text-align:center" :data="options">
  <div >
    <span>桌号：</span>
    <el-select v-model="value" placeholder="请选择" align="center">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  </div>
</el-card>

      <!--表单区域-->
      <el-table :data="items" height="600" border>
        <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="商品名称">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="所属店铺">
            <span>{{ props.row.shop }}</span>
          </el-form-item>
          <el-form-item label="商品 ID">
            <span>{{ props.row.id }}</span>
          </el-form-item>
          <el-form-item label="店铺 ID">
            <span>{{ props.row.shopId }}</span>
          </el-form-item>
          <el-form-item label="商品分类">
            <span>{{ props.row.category }}</span>
          </el-form-item>
          <el-form-item label="店铺地址">
            <span>{{ props.row.address }}</span>
          </el-form-item>
          <el-form-item label="商品描述">
            <span>{{ props.row.desc }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
        <el-table-column prop="name" label="菜名" width="500" align="center"> 
        </el-table-column>
        <el-table-column prop="price" label="单价" width="400" align="center">
        </el-table-column>
        <el-table-column label="数量"  aria-label="center" width="500" align="center">
        <template slot-scope="scope">
          <el-input-number size="mini" :step="scope.row.step" :min="0" :max="10" v-model="scope.row.num"></el-input-number>
        </template>
     

      </el-table-column>
  
      </el-table>
            
  <el-card style="font-size:24px  ;text-align:right">
  <div >
   <el-row>
    <el-button type="primary" @click="onSubmit"  round>提交订单</el-button>
     </el-row>
  </div>
</el-card>

     
</div>
       
      <!-- 订单列表 -->

</template>


<script>
import {requestData} from "../../ajax";
export default {
 data:function() {
      return {
        items:[],
        value: '',
        options:[],
      }
    },
    mounted:function(){
        // 准备条件
        var request_data = new FormData();
        // 请求数据
        requestData("get","order.json", request_data).then((resp)=>{
            // 赋值数据到linesdata
            var result = resp.data;
            this.items = result["order_info"];
            this.options=result["options"];
        });
        
    },
  methods:{
    onSubmit(){
       this.$alert('提交成功！').then(()=>{this.$router.push({path:"/waiter"})});
    }
  }
};
</script>
<style scoped>
.el-breadcrumb{
    margin-bottom: 15px;
    font-size: 15px;
}
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
